<template>
  <div class="login-container">
    <div class="login-form-container">
      <div class="login-logo">
        <img alt="logo" width="50" src="@/assets/images/logo.png" />
        <span style="font-family: 华文楷体, 楷体, 微软雅黑, serif">{{ title }}</span>
      </div>
      <el-card class="login-form-box">
        <div class="login-form-box-title">
          <div>登录</div>
        </div>
        <el-form ref="formRef" :model="loginInfo">
          <el-form-item path="user_name">
            <el-input v-model.trim="loginInfo.user_name" size="large" type="text" placeholder="请输入账号" @keydown.enter="handleLogin" :prefix-icon="User"/>
          </el-form-item>
          <el-form-item path="password" >
            <el-input v-model.trim="loginInfo.password" size="large" type="password" placeholder="请输入密码" @keydown.enter="handleLogin" :prefix-icon="Lock"/>
          </el-form-item>
          <el-form-item>
            <div class="demo-input-size">
              <el-input v-model.trim="sidentifyMode" class="w-55 m-2" size="large" type="text" placeholder="验证码" />
            </div>
            <div class="code" @click="refreshCode">
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
          </el-form-item>
          <div>
            <el-checkbox v-model="isAgreeXy">同意协议（见底部）</el-checkbox>
          </div>
          <el-button size="large" :ghost="false" class="login-form-box-confim" type="primary" @click="handleLogin">登 录</el-button>
        </el-form>
      </el-card>
      <div class="xieyi">
        <span style="font-family: 华文楷体, 楷体, 微软雅黑, serif">
          ©版权所有 2014-2023 {{title}}
        </span><br />
        <span style="font-family: 华文楷体, 楷体, 微软雅黑, serif">
          协议:本系统只供学习交流娱乐之用!由此产生任何纠纷由使用者自己承担!不得二次转让和出售! (登录即代表同意)
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { createLocalStorage } from '@/utils/cache';
import { setToken } from '@/utils/token';
import { useUserStore } from '@/store/modules/user'
import { ElMessage, ElLoading } from 'element-plus'
import SIdentify from '@/components/Sidentify.vue'
import { User, Lock } from '@element-plus/icons-vue'


const router = useRouter();
const useUser = useUserStore()

// 标题
const title = import.meta.env.VITE_APP_TITLE;
let loading = null
const isAgreeXy = ref(false)
const loginInfo = ref({
  user_name: 'cjroot',
  password: '123456',
});


let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母

onMounted(() => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
})

// 生成随机数
const randomNum = (min, max) => {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)]
  }
}
// 更新验证码
const refreshCode = () => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
}

// 处理登录功能
async function handleLogin () {

  const { user_name, password } = loginInfo.value;

  if (!user_name || !password || !isAgreeXy.value) {
    if (!user_name || !password) {
      ElMessage.warning('请输入用户名和密码');
    } else if (!isAgreeXy.value) {
      ElMessage.warning('请同意协议');
    }
    return;
  }

  // //验证验证码不为空
  // if (!sidentifyMode.value) {
  //   ElMessage({ type: 'error', message: '验证码不能为空！' })
  //   return
  // }
  // //验证验证码是否正确
  // if (sidentifyMode.value != identifyCode.value) {
  //   ElMessage({ type: 'error', message: '验证码错误' })
  //   refreshCode()
  
  try {
    loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    await useUser.login({ user_name: user_name, password: password.toString() },router);
    loading.close()
  } catch (error) {
    loading.close()
  }
}

</script>
<style lang="scss">
.login-container {
  .n-card__content {
    padding: 30px;
  }
}
</style>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(@/assets/images/login-bg.svg);
  background-position: left 100px;
  background-size: 600px 100%;
  background-repeat: no-repeat;

  .login-form-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .login-logo {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 22px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-form-box {
      width: 475px;
      .login-form-box-title {
        font-size: 30px;
        margin: 10px 0 40px 0;
      }
      .login-form-box-confim {
        width: 100%;
        margin: 20px 0 20px 0;
      }
      .code{
        margin-left: 70px;
      }
    }
    .xieyi {
      text-align: center;
      position: absolute;
      bottom: 10px;
    }
  }
}
</style>
